<template>
  <div class="" v-if="state !== 'hidden'">

    <el-form ref="form" :model="form" :label-width="'write' == state ? '115px':'auto'"
             :class="'write' == state ? 'write-form':'read-form'"
             :label-position="'write' == state ? 'top':'left'">

      <div class="card-wrap flex-column justify-end card-padding">
        <div class="card-title-wrap">
          <span>车辆信息</span>
          <span></span>
        </div>

        <CarBaseInfo :form="form"></CarBaseInfo>
      </div>

      <div class="card-wrap flex-column justify-end card-padding">
        <div class="card-title-wrap">
          <span>GPS续费信息</span>
          <span></span>
        </div>

        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="到期GPS品牌:" prop="gpsBrand">
              <el-input v-if="'write' == state" v-model="form.gpsBrand" disabled></el-input>
              <span v-else>{{ form.gpsBrand|filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="到期设备类型:" prop="equipmentType">
              <el-input v-if="'write' == state"
                        :value="1==form.equipmentType?'有线':2==form.equipmentType?'无线':3==form.equipmentType?'有线+无线':''"
                        disabled></el-input>
              <span
                v-else>{{ 1 == form.equipmentType ? '有线' : 2 == form.equipmentType ? '无线' : 3 == form.equipmentType ? '有线+无线' : '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="到期设备编号:" prop="equipmentNo">
              <el-input v-if="'write' == state" v-model="form.equipmentNo" disabled></el-input>
              <span v-else>{{ form.equipmentNo|filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="到期SIM卡号:" prop="simNo">
              <el-input v-if="'write' == state" v-model="form.simNo" disabled></el-input>
              <span v-else>{{ form.simNo|filterNull }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装到期时间:" prop="installExpireTime">
              <el-input v-if="'write' == state" v-model="form.installExpireTime" disabled></el-input>
              <span v-else>{{ form.installExpireTime|filterNull }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">

          <el-col :span="8">
            <el-form-item label="是否需要续费:" prop="renewFlag"
                          :rules="'write' == state ? {
                                         required: true,
                                         message: '请选择是否需要续费',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewFlag, callback)
                                       }:{}">
              <el-select filterable v-if="'write' == state" v-model="form.renewFlag" clearable style="width: 100%">
                <template v-for="dict in dict.type.gps_is_renewal">
                  <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                </template>
              </el-select>
              <span v-else><dict-tag
                :options="dict.type.gps_is_renewal"
                :value="form.renewFlag"/></span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="续费设备类型:" prop="renewEquipmentType"
                          :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费设备类型',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewEquipmentType, callback)
                                       }:{}">
              <el-select
                @change="epTypeSel"
                filterable v-if="'write' == state" v-model="form.renewEquipmentType" clearable style="width: 100%">
                <template v-for="dict in dict.type.gps_device_type">
                  <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                </template>
              </el-select>
              <span v-else><dict-tag
                :options="dict.type.gps_device_type"
                :value="form.renewEquipmentType"/></span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="续费设备编号:" prop="renewEquipmentNo"
                          :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费设备编号',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewEquipmentNo, callback)
                                       }:{}">
              <!--                            <el-select filterable-->
              <!--                                @change="equipSel"-->
              <!--                                v-if="'write' == state" v-model="form.renewEquipmentNo" clearable style="width: 100%">-->
              <!--                                <template v-for="dict in simList">-->
              <!--                                    <el-option :label="dict.equipmentNo" :value="dict.equipmentNo" :key="dict.equipmentNo"></el-option>-->
              <!--                                </template>-->
              <!--                            </el-select>-->

              <el-input v-model="form.renewEquipmentNo" clearable v-if="'write' == state" disabled
                        placeholder="请选择续费设备类型"></el-input>

              <span v-else>
                                {{ form.renewEquipmentNo|filterNull }}
                <!--                                <dict-tag-->
                <!--                                :options="dict.type.gps_device_type"-->
                <!--                                :value="form.renewEquipmentNo"/>-->
                            </span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="续费SIM卡号:" prop="renewSim"
                          :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费SIM卡号',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewSim, callback)
                                       }:{}">
              <!--                            <el-select filterable-->
              <!--                                @change="simSel"-->
              <!--                                v-if="'write' == state" v-model="form.renewSim" clearable style="width: 100%">-->
              <!--                                <template v-for="dict in simList">-->
              <!--                                    <el-option :label="dict.simNo" :value="dict.simNo" :key="dict.simNo"></el-option>-->
              <!--                                </template>-->
              <!--                            </el-select>-->

              <el-input v-model="form.renewSim" clearable v-if="'write' == state" disabled
                        placeholder="请选择续费设备类型"></el-input>

              <span v-else>
                                {{ form.renewSim|filterNull }}
                <!--                                <dict-tag-->
                <!--                                :options="dict.type.gps_device_type"-->
                <!--                                :value="form.renewSim"/>-->
                            </span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="续费年限:" prop="renewYear"
                          :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费年限',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, form.renewYear, callback)
                                       }:{}">
              <el-select filterable @change="renewSel" v-if="'write' == state" v-model="form.renewYear" clearable
                         style="width: 100%">
                <template v-for="dict in renewYearList">
                  <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                </template>
              </el-select>
              <!--                            <span v-else><dict-tag-->
              <!--                                :options="dict.type.gps_device_type"-->
              <!--                                :value="form.renewYear"/></span>-->
              <span v-else>{{ form.renewYear|filterNull }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="续费费用:" prop="renewPrice"
                          :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请输入续费费用',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.renewPrice, callback)
                                       }:{}">
              <el-input v-model="form.renewPrice" clearable v-if="'write' == state"
                        @input="value=>{if(isNaN(form.renewPrice)) { form.renewPrice = '' }; if(form.renewPrice.indexOf('.')>0){form.renewPrice=form.renewPrice.slice(0,form.renewPrice.indexOf('.')+3)} form.renewPrice = form.renewPrice.replace(new RegExp(`^\\D*(\\d{8}(?:\\.\\d{0,2})?).*$`, ''), '$1')}"
                        placeholder="请输入续费费用"></el-input>
              <span v-else>{{ form.renewPrice|filterNull }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="续费开始时间:" prop="renewStartTime"
                          :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费开始时间',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.renewStartTime, callback)
                                       }:{}">
              <el-date-picker @change="startChange" v-model="form.renewStartTime" style="width: 100%"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              v-if="'write' == state" type="datetime"
                              placeholder="请选择续费开始时间"></el-date-picker>
              <span v-else>{{ form.renewStartTime|filterNull }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="GPS到期时间:" prop="renewEndTime"
                          :rules="'write' == state ? {
                                         required: 1==form.renewFlag,
                                         message: '请选择续费年限',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.renewEndTime, callback)
                                       }:{}">

              <el-date-picker v-model="form.renewEndTime" style="width: 100%"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              v-if="'write' == state" type="datetime"
                              placeholder="请选择续费开始时间"></el-date-picker>
              <span v-else>{{ form.renewEndTime|filterNull }}</span>

            </el-form-item>
          </el-col>

        </el-row>
      </div>
      <div class="card-wrap flex-column justify-end card-padding">
        <div class="card-title-wrap">
          <span>备注</span>
          <span></span>
        </div>
        <el-row :gutter="30">

          <el-col :span="16">
            <el-form-item label="备注:" prop="remark"
                          :rules="'write' == state ? {
                                         required: 2==form.renewFlag,
                                         message: '请输入备注',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.remark, callback)
                                       }:{}">
              <el-input v-if="'write' == state" type="textarea"
                        v-model="form.remark" clearable maxlength="500"
                        placeholder="请输入备注"></el-input>
              <span v-else>{{ form.remark|filterNull }}</span>
            </el-form-item>
          </el-col>


        </el-row>

      </div>

    </el-form>

  </div>
</template>

<script>


import moment from "moment";
import CarBaseInfo from "@/views/GPSManage/components/carBaseInfo.vue";
import {gpsSimInfo} from "@/api/gps/gpsList";

export default {
  components: {CarBaseInfo},
  dicts: ["gps_workorder_status", 'quota_rent_type', 'gps_workorder_type', 'gps_device_type', 'gps_is_renewal'],
  props: {
    value: {
      default: {},
    },
    state: {
      default: "write",
    },
  },
  computed: {
    form: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },

  },
  watch: {
    form: {
      immediate: true,
      deep: true,
      handler(val) {
        if (this.firstEnter && val && val.carId) {
          this.firstEnter = false
          this.getSim()
        }
      }
    }
  },
  data() {
    return {
      firstEnter: true,
      renewYearList: [{
        label: "1年",
        value: 1
      }, {
        label: "2年",
        value: 2
      }, {
        label: "3年",
        value: 3
      }, {
        label: "4年",
        value: 4
      }, {
        label: "5年",
        value: 5
      }],
      simList: []
    };
  },
  mounted() {
    // this.form.equipmentType = '3'
    // this.form.wiredCount = 1
    // this.form.wirelessCount = 1
  },
  methods: {
    epTypeSel(val) {
      if(1==val){
        let finds = this.simList.filter(item => item.equipmentNo.indexOf("有线")>=0);
        this.form.renewSim = finds?.map(item=>item.simNo).join(",");
        this.form.renewEquipmentNo = finds?.map(item=>item.equipmentNo).join(",");
      }else if(2==val){
        let finds = this.simList.filter(item => item.equipmentNo.indexOf("无线")>=0);
        this.form.renewSim = finds?.map(item=>item.simNo).join(",");
        this.form.renewEquipmentNo = finds?.map(item=>item.equipmentNo).join(",");
      }else if(3==val){
        let finds = this.simList.filter(item => item.equipmentNo.indexOf("有线")>=0 || item.equipmentNo.indexOf("无线")>=0);
        this.form.renewSim = finds?.map(item=>item.simNo).join(",");
        this.form.renewEquipmentNo = finds?.map(item=>item.equipmentNo).join(",");
      }else {
        this.form.renewSim = null
        this.form.renewEquipmentNo = null
      }
    },
    equipSel(val) {
      let find = this.simList.find(item => item.equipmentNo == val);
      if (find) {
        this.form.renewSim = find.simNo
      } else {
        this.form.renewSim = null
      }
    },
    simSel(val) {
      let find = this.simList.find(item => item.simNo == val);
      if (find) {
        this.form.renewEquipmentNo = find.equipmentNo
      } else {
        this.form.renewEquipmentNo = null
      }
    },
    getSim() {
      gpsSimInfo({
        carId: this.form.carId
      }).then(res => {
        // this.simList = res.data
        this.simList = res?.data[0]?.equipmentNo?.split(",")?.map((item, index) => {

          let simList = res?.data[0]?.simNo?.split(",");

          return {
            simNo: simList[index],
            equipmentNo: item,
          }

        }) ?? []
      })

    },
    renewSel(val) {
      if (this.form.renewYear && this.form.renewStartTime) {
        let endtime = moment(this.form.renewStartTime, 'YYYY-MM-DD HH:mm:ss').add(this.form.renewYear, 'year').format('YYYY-MM-DD HH:mm:ss')
        this.$set(this.form, 'renewEndTime', endtime)
      }
      this.$forceUpdate()
    },
    startChange(val) {
      if (this.form.renewYear && this.form.renewStartTime) {
        let endtime = moment(this.form.renewStartTime, 'YYYY-MM-DD HH:mm:ss').add(this.form.renewYear, 'year').format('YYYY-MM-DD HH:mm:ss')
        this.$set(this.form, 'renewEndTime', endtime)
      }
      this.$forceUpdate()
    },


    validData(rule, value, callback) {
      // console.log('aaa', rule, value, callback)
      if (rule.required && !value) {
        // this.$modal.msgError(`未填写${value}`);
        callback(new Error(rule.message));
      } else {
        callback();
      }
    },


    async valid() {

      // if(this.form.carList && this.form.carList.length>0){
      //     this.form.carIds = this.form.carList.map(item=>{
      //         return item.carId
      //     })
      //     this.form.workIds = this.form.carList.map(item=>{
      //         return item.id
      //     })
      // }else {
      //     this.form.carIds = [this.form.carId]
      //     this.form.workIds = [this.form.id]
      // }
      this.form.workId = this.form.id


      return new Promise((resolve) => {
        if ('write' == this.state) {
          this.$refs["form"].validate(valid => {
            resolve(valid);
          });
        } else {
          resolve(true)
        }
      })
    },
  }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
  margin-left: 0 !important;
}

.el-descriptions {
  margin: 0 -15px;
}
</style>
